<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CAW</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/caw-utils.js"></script>
<script type="text/javascript" src="js/caw-rest-client.js"></script>
<script type="text/javascript" src="js/caw-ui-components.js"></script>
<style type="text/css">
#background {
	background-color: #0000FF;
	/* 	position: absolute;
	top: 55px;
	left: 8px;
	right: 8px;
	bottom: 26px; */
}

.logo {
	display: inline-table;
	margin: auto;
	/*	width: 32px;
	height: 32px;
 position: absolute;
	top: 8px; */
}

.form {
	width: 100%;
	padding-top: 10px;
}

.ui-row-key {
	vertical-align: top;
}

.ui-table-odd {
	background-color: #D8DFEA;
}

.ui-table-even {
	
}

.ui-table-header {
	font-weight: bold;
	background-color: #D8DFEA;
}

.ui-column-family {
	vertical-align: top;
}

.ui-qualifier-name {
	font-weight: bold;
	font-size: 0.7em;
}

.ui-qualifier-value {
	font-size: 0.7em;
}

.formFieldDynamic {
	
}

.formFieldDynamicRowKey {
	
}

.formFieldDynamicColumns {
	
}

.formField {
	width: 100%;
}

.formField td {
	padding-top: 3px;
}

.formField td input {
	width: 100%;
	float: right;
}

.formField td img {
	float: right;
	width: 18px;
	height: 18px;
	cursor: pointer;
	cursor: hand;
}

.formField td table {
	width: 100%;
	float: right;
}

.getDialog {
	display: none;
}

.iconOpen {
	src: url("images/open.jpg");
}

.iconClose {
	src: url("images/close.jpg");
}

.ui-autocomplete {
	max-height: 200px;
	overflow-y: scroll;
	overflow-x: hidden;
}
</style>
<script>
	CAW_CLIENT = namespace("caw.ws.client");
	CAW_UI = namespace("caw.ui");

	//	CAW_UI.showMessage("#messageNotification", "ERROR", "asdasd");
	function showDialog(selector) {
		hideAllDialogs();
		$(selector).dialog("open");
		return false;
	}

	function initWidgets() {
		// header buttons
		$("#main_menu_get").button();
		$("#main_menu_scan").button();
		$("#main_menu_help").button();
		$("#main_menu_admin").button();
		$("#main_menu_about").button();

		// button events
		$("#main_menu_get").click(function() {
			showDialog("#get_dialog");
		});

		$("#main_menu_scan").click(function() {
			hideAllDialogs();
			$("#scan_dialog").dialog("open");
			return false;
		});

		// dialog widgets
		topOffset = $("#main_menu_get").offset().top + $("#main_menu_get").height();
		leftGet = $("#main_menu_get").offset().left;

		CAW_CLIENT.getTableDescriptors(function(data) {
			CAW_UI.buildRowKeyGetDialog(leftGet, topOffset, data, function(model) {
				CAW_CLIENT.getRecordsMultiget(model.tableName, model.versions, model.timestamp, model.rowkeys, model.columns, CAW_UI.plotRowListResultTable, showWSErrorDialog)
			});
		}, showWSErrorDialog);

		leftScan = $("#main_menu_scan").offset().left;

		$("#scan_dialog").dialog({
			autoOpen : false,
			draggable : false,
			position : [ leftScan, topOffset ]
		});

		$(".ui-dialog-titlebar").hide();
		$("#background").click(hideAllDialogs);
	}
	// init widgets
	$(function() {
		//alert(nametop.location.host);
		initWidgets();
	});

	function hideAllDialogs() {
		$("#get_dialog").dialog("close");
		$("#scan_dialog").dialog("close");
	}

	function showWSSuccessfulDialog(data) {
		try {
			alert(JSON.stringify(data));
		} catch (ex) {
		} finally {
		}
	}

	function showWSErrorDialog(XMLHttpRequest, textStatus, errorThrown) {
		try {
			alert(JSON.stringify(XMLHttpRequest) + "\n" + textStatus + "\n" + errorThrown);
		} catch (ex) {
		} finally {
		}
	}
</script>
</head>
<body>
     <div id="main_menu" style='position: fixed !important; display: block; background-color: #222; width: 100%;'>
          <button id="main_menu_get">Get</button>
          <button id="main_menu_scan">Scan</button>
          <button id="main_menu_admin">Admin</button>
          <button id="main_menu_help">Help</button>
          <button id="main_menu_about">About</button>
     </div>
     <div style="display: inline;">
          <div id="working-area" style="padding-top: 55px; float: left;"></div>
          <div id="status-panel" style="padding-top: 55px; float: right; position: fixed; display: block; width: 100px !important; right: 0; background-color: red; height: 100%">aaaa</div>
     </div>
</body>
<!-- Popup dialogs -->
<div id="scan_dialog"></div>
<div id="get_dialog" class="getDialog">
     <table class="form" id="test1">
          <tr class="formField">
               <td><label>Table name:</label></td>
               <td><input type="text" id="get_dialog_table_name" /></td>
          </tr>
          <tr class="formField formFieldDynamic">
               <td><img id="get_dialog_row_key_plus" src="images/plus.png" /><label>Row key:</label></td>
               <td><input type="text" class="formFieldDynamicRowKey" /></td>
          </tr>
          <tr class="formField">
               <td></td>
               <td><img id="get_dialog_additional_fields_header" src="images/open.jpg"></td>
          </tr>
          <tr class="formField">
               <td colspan="2">
                    <table id="get_dialog_additional_fields">
                         <tr class="formField">
                              <td><label>Versions:</label></td>
                              <td><input type="text" id="get_dialog_additional_fields_versions" /></td>
                         </tr>
                         <tr class="formField">
                              <td><label>Timestamp:</label></td>
                              <td><input type="text" id="get_dialog_additional_fields_timestamp" /></td>
                         </tr>
                         <tr class="formField formFieldDynamic">
                              <td><img id="get_dialog_additional_fields_columns_plus" src="images/plus.png" /><label>Columns:</label></td>
                              <td><input type="text" class="formFieldDynamicColumns" /></td>
                         </tr>
                    </table>
               </td>
          </tr>
          <tr class="formField">
               <td><input type="button" value="Cancel" id="get_dialog_cancel"></td>
               <td><input type="button" value="Get" id="get_dialog_execute"></td>
               <td></td>
          </tr>
     </table>
</div>
<span id="message_notification"> </span>
<span id="tooltip_notification"> </span>
</html>
